<template>
	<view class="contact">
		<view class="header">
			<view class="findPassenger" v-if="isDriver">
				<image src="../../common/images/car.png" class="image" mode="aspectFill"></image>
				<text class="value">车找人</text>
			</view>
			<view class="findDriver" v-if="!isDriver"></view>
		<!-- 	<view class="contact">
				<text class="value">联系ta</text>
			</view> -->
			<button class="button" @click="onClickContact">联系</button>
		</view>
		<view class="content">
			<view class="row">
				<image src="../../common/images/position_1.png" class="pic" mode="aspectFill"></image>
				<view class="lable-location">起点：</view>
				<text class="value">广州市增城区凤岗地铁站C口</text>
			</view>
			<view class="row">
				<image src="../../common/images/position_2.png" class="pic" mode="aspectFill"></image>
				<view class="lable-location">终点：</view>
				<text class="value">广州市天河区凯华国际东门</text>
			</view>
			<view class="row">
				<image src="../../common/images/clock.png" class="pic" mode="aspectFill"></image>
				<view class="lable-time">时间：</view>
				<view class="value start-end">
					<uni-dateformat :date="Date.now()" format="hh:mm"></uni-dateformat>
					<view class="interval">~</view>
					<uni-dateformat :date="Date.now()+30*60*1000" format="hh:mm"></uni-dateformat>
				</view>
			</view>
			<view class="row">
				<view class="laber-passby">途径点：</view>
				<view class="value tabs">
					<view class="tab">科慧北区</view>
					<view class="tab">科慧中区</view>
					<view class="tab">凤岗C口</view>
				</view>
			</view>
			
			<view class="row publisher">
				<image src="../../common/images/publisher.png" class="pic" mode="aspectFill"></image>					
				<view class="lable-publisher">发布人：</view>
				<view class="value">张先生</view>
			</view>
			
		</view>
		<uni-popup ref="contactPopup" type="bottom">
			<view class="contactPopup">	
				<view class="popHeader">
					<view class=""></view>
					<view class="title">联系对方</view>
					<view class="close" @click="clickContactClose">
						<uni-icons type="closeempty" size="18" color="#999"></uni-icons>
					</view>
				</view>
				<scroll-view scroll-y>
					<view class="content">
						<view class="copyRight">
							温馨提醒：<br>
							·每天每位用户仅能获取4位发布者的联系方式<br>
							·根据对方手机号添加ta的微信，私聊确认行程<br>
						</view>
					</view>
					<view class="footer">
						<button @click="submitButton"						 
						 type="default" size="mini" plain>获取联系电话</button>
					</view>
				</scroll-view>		
			</view>			
		</uni-popup>
			
	</view>
</template>

<script setup>
import { ref } from 'vue';
const isDriver = ref(true)

const contactPopup = ref(null)



defineProps({
	isMore:{
		type:Boolean,
		default:false
	},
	item:{
		type:Object,
		default(){
			return{
				publishType: "findDriver",	// 发布类型：findDriver findPassenger
				start: "广州市增城区凤岗站C口",			// 起点
				send: "广州市天河区凯华国际东门",		// 终点
				tirptime:"",	//行程时间
				publishId:"10001",		// 发布者Id
				userId:"20001",			// 用户Id
				tags:[101,102,103,104]	//发布者的行程要求
				
			}
		}
	}

})
// todo
const submitButton = function(){
	console.log("点击了按钮");
	uni.showToast({
		title:"评分成功",
		icon:"none"
	})
}

// 点击联系按钮，获取对方发布信息
const onClickContact = function(){
	contactPopup.value.open();
}

// 点击x按钮，关闭联系浮层
const clickContactClose = function(){
	contactPopup.value.close();
}

</script>

<style lang="scss" scoped>
.travel-item{
	background: #fff;
	padding: 30rpx;
	border-radius: 30rpx ;
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	position: relative;		
	.header{
		padding: 0 15rpx;
		display: flex;
		justify-content: space-between;
		padding-left: 1rpx;
		.image {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 20px; /* 图标的宽度 */
			height: 20px; /* 图标的高度 */
			border-radius: 50%; /* 使图标显示为圆形 */
			object-fit: cover; /* 确保图片填充整个圆形区域 */
		}
		.value{
			// border: 2rpx solid #3498DB;
			display: flex;
			align-items: center;
			justify-content: center;
			color: $brand-theme-color;
			font-size: 16px;
		}
		.findPassenger{	
			display: flex;
			gap: 10px; /* 文字与图标的间距 */
			.image {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 20px; /* 图标的宽度 */
				height: 20px; /* 图标的高度 */
				border-radius: 50%; /* 使图标显示为圆形 */
				object-fit: cover; /* 确保图片填充整个圆形区域 */
			}
			.value{
				display: flex;
				align-items: center;
				justify-content: center;
				color: $brand-theme-color;
				font-size: 16px;
			}
		  
		}
		.findDriver{
			padding: 15rpx 10rpx 10rpx 20rpx;
			display: flex;
			gap: 10px; /* 文字与图标的间距 */
			.image {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 20px; /* 图标的宽度 */
				height: 20px; /* 图标的高度 */
				border-radius: 50%; /* 使图标显示为圆形 */
				object-fit: cover; /* 确保图片填充整个圆形区域 */
			}
			.value{
				display: flex;
				align-items: center;
				justify-content: center;
				color: $brand-theme-color;
				font-size: 16px;
			}
		  
		}			
		.contact{
			width: 100rpx;
			background: #40A8C4;
			border: 0rpx solid blue;
			border-radius: 10rpx;
			display: flex;
			align-items: center; /* 垂直居中 */
		    justify-content: center; /* 水平居中 */
			.value{					
				color: #fff;
				font-size: 25rpx;
			}			
		}
	}
	.button {
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		z-index: 100;
	    cursor: pointer;
	    width: 50px;
	    height: 20px;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    gap: 1rem;
	    font-size: 0.7em;
	    font-weight: 900;
	    letter-spacing: 2px;
	    color: #fff;
	    background: #40A8C4;
	    border: 2px solid #40A8C4;
	    border-radius: 0.75rem;
	    box-shadow: 0 4px 0 #00788C;
	    transform: skew(-10deg);
	    transition: all 0.1s ease;
	    filter: drop-shadow(0 15px 20px #40A8C4);
		white-space: nowrap;  // 防止内容换行	
		z-index: 0;
	  }						 
	  .button:active {
	    letter-spacing: 0px;
	    transform: skew(-10deg) translateY(8px);
	    box-shadow: 0 0 0 #00788C;
	  }
	
	.content{			
		.row{
			display: flex;
			// padding: 16rpx 0;
			font-size: 32rpx;
			height: 60rpx;
			line-height: 1.6em;
			.pic{
				width: 35rpx;
				height: 35rpx;
				padding: 10rpx 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: -10rpx; /* 向左移动 5rpx */
				
			}
			.lable-location {
				color: $text-font-color-3;
				width: 80rpx;
				text-align: left;		// 右对齐
				font-size: 30rpx;
				margin-left: 13rpx; /* 向左移动 5rpx */
				white-space: nowrap;  // 防止内容换行
			}
			.value{
				color: $text-font-color-2;
				flex: 1;
				width: 0;
				max-width: 500rpx;
				white-space: nowrap;  // 防止内容换行
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 25rpx;
				padding-left: 10rpx;
			}
			.lable-time{
				color: $text-font-color-3;
				width: 80rpx;
				font-size: 30rpx;
				text-align: right;		// 右对齐
				margin-left: 13rpx;
				white-space: nowrap;  // 防止内容换行
			}
			.start-end{
				display: flex;
				.interval{
					padding: 0 10rpx 0 10rpx;
				}
			}
			.lable-publisher{
				color: $text-font-color-3;
				width: 100rpx;
				font-size: 28rpx;
				text-align: right;		// 右对齐
				white-space: nowrap;  // 防止内容换行
				
			}
			.laber-passby{
				color: $text-font-color-3;
				width: 120rpx;
				font-size: 28rpx;
				text-align: right;		// 右对齐
				white-space: nowrap;  // 防止内容换行
				padding-left: 25rpx;
			}
			.tabs{
				display: flex;
				padding-left: 20rpx;
				flex-wrap: wrap; 	// 自动换行
				.tab{
					border: 1px solid $brand-theme-color;
					color: $brand-theme-color;
					font-size: 22rpx;
					padding: 8rpx 10rpx;
					border-radius: 40rpx;
					line-height: 1em;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}	
		}
	}	
}
.popHeader{
	display: flex;
	justify-content: space-between;
	align-items: center;
	.title{
		color: $text-font-color-1;
		font-size: 40rpx;
		font-weight: 400;
	}
	.close{
		padding: 6rpx;
	}
}


.contactPopup{
	background:
	linear-gradient(to bottom, transparent, #fff 400rpx),
	linear-gradient(to right, #A8DADC 40%, #FADADD);
	padding: 30rpx;
	border-radius: 30rpx 30rpx 0 0;
	overflow: hidden;
	scroll-view{
		max-height: 60vh;
		padding-bottom: 100rpx;
		.content{
			.copyRight{
				font-size: 28rpx;
				padding: 20rpx;
				background: #f6f6f6;
				color:  $text-font-color-2;
				border-radius: 20rpx 0;
				margin: 20rpx 0;
				line-height: 1.6em;
			}	
		}
		.footer{
			width: 70vm;
			padding: 10rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			button{
				background: $brand-theme-color;
				border: none;
				font-size: 20px; /* 设置字体大小 */
				transition: transform 0.1s ease, box-shadow 0.1s ease; /* 添加过渡效果 */
			}
			button:active {
			    transform: scale(0.85); /* 按下时缩小 */
			    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
			}
		}
		
	}
}
</style>